<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>山河旅行社</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header id="header">
    <jsp:include page="head.jsp"/>
</header>


<div id="headline">
    <img src="img/headline.jpg" alt="">
    <hgroup>
        <h2>旅游资讯</h2>
        <h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
    </hgroup>
</div>
<form action="/list.html" method="post" id="searchForm">
    <input type="hidden" id="pageNum" name="pn"/>

</form>
<div id="container">
    <aside class="sidebar">
        <jsp:include page="right.jsp"/>
    </aside>
    <div class="list information">
        <h2 style="margin:0 0 20px 0">旅游资讯 </h2>

        <c:forEach items="${pageInfo.result}" var="lise">
        <figure class="tour">
            <img src="${lise.picture}" alt="曼谷-芭提雅6日游">
            <figcaption>

                <article>
                    <header>
                        <hgroup>
                            <h2>${lise.city.name}</h2>
                            <h3 class="xs-hidden">${lise.introduce}</h3>
                        </hgroup>
                    </header>
                    <ol class="md-hidden">
                        <li><mark>交通</mark>：${lise.traffic}</li>
                        <li><mark>团期</mark>：${lise.needed}</li>
                    </ol>
                    <div class="buy">
                        <div class="price">￥<strong>${lise.price}</strong></div>
                        <div class="reserve md-hidden"><a href="getListById.html?id=${lise.id}">立即抢购</a></div>
                    </div>
                    <div class="type">国内长线</div>
                    <footer class="md-hidden">本团游由山河旅行社赞助提供，截止于<time>2016-10-10</time></footer>
                </article>

            </figcaption>
        </figure>
        </c:forEach>
        <div class="more"><a href="#" onclick="page(${empty param.pn?1:param.pn-1})">上一页</a>
            <a href="#" onclick="page(${empty param.pn?2:param.pn+1})">下一页</a>
    </div>
</div>

<footer id="footer">
    <jsp:include page="below.jsp"/>
</footer>
</div>
</body>
<script type="text/javascript">
//    $(function(){
//        $("tr:odd").css("background-color","yellow")
//    })
    function page(pn) {
        if (pn == null || isNaN(pn)) {
            pn = 1
        }
        if (pn < 1) {
            pn == 1;
        }
        if (pn > "${pageInfo.totalPage}") {
            pn = "${pageInfo.totalPage}";
        }
        $("#pageNum").val(pn);
        $("#searchForm").submit();
    }
</script>
</html>
